<template>
  <!-- 国家详情 -->
  <div class="countryprofile">
    <img class="countryimg" :src="baseUrl+countryData.imageAddress" alt="">
    <div class="rightmsg">
        <div class="cin_name">{{countryData.countryName}}</div>
        <div class="eng_name">{{countryData.englishName}}</div>
        <div class="address">{{countryData.countryEasyDescription}}</div>
    </div>
</div>
</template>

<script>
import { apiGet } from '@/assets/js/api'
import { BaseURL } from '@/assets/js/api'
export default {
  data() {
    return {
      countryData: [],
      baseUrl: '',
    }
  },
  props: {
    ccountryID: {
      type: String,
      default: '1'
    }
  },
  created() {
    this.baseUrl = BaseURL
    apiGet('/nps/nation/getEasyInfoByCountryId', {id: this.ccountryID}).then(res => {
        this.countryData = res.data
    })
  },
}
</script>

<style lang="scss" scoped>
.countryprofile{
  background-color: $borderColor;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 200px 20px 200px;
  height: 400px;
  .countryimg{
      $imgSize: 350px;
      width: $imgSize;
      height: $imgSize;
      border-top-right-radius: $imgSize/2 - 10px;
  }
  .rightmsg{
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 600px;
      margin-left: 100px;
      .cin_name{
          font-size: 40px;
          font-weight: bold;
      }
      .eng_name{
          color: $themeColor;
          font-size: 40px
      }
      .address{
          font-size: 0.8em;
          margin-top: 40px;
          text-indent: 1.6em;
          color: gray;
      }
  }
}
</style>